@media screen and (max-width: 768px) {
  .banner5 {
    flex-direction: column;
  }
  .banner5 .left {
    padding-right: 0;
  }
  .banner5 .left .introduce {
    margin-top: 82px;
  }
  .banner5 .right {
    margin-left: -123px;
    margin-right: -123px;
    height: auto;
    flex-direction: column;
    overflow: hidden;
    margin-top: 0;
    margin-bottom: var(--yd-gap);
  }
  .banner5 .right::before,
  .banner5 .right::after {
    display: none;
  }
  .banner5 .right > div {
    display: inline;
    flex-direction: row;
    white-space: nowrap;
  }
  .banner5 .right > div .card {
    display: inline-block;
    width: 696px;
    height: 246px;
    position: relative;
    margin-right: 82px !important;
    border-radius: 41px;
    padding: 72px 46px;
  }
  .banner5 .right > div .card:last-child {
    margin-right: 0;
  }
  .banner5 .right > div .card img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 609px;
    height: 102px;
  }
  .banner5 .right.skeleton > div:first-child {
    transform: translateX(-200px);
  }
  .banner5 .right.skeleton > div:last-child {
    transform: translateX(-500px);
  }
}
